<template>
	<view class="wap_content">
		<u-navbar title="MV精选" fixed placeholder :autoBack="true">
		</u-navbar>

		<view class="mv_box" v-if="mvList.length>0">

			<view class="mv_item" v-for="(item, index) in mvList" :key="item.id" @click="mvClick(item, index)">
				<view class="mv_source">
					<view class="mv_source_poser_box display_flex_center" v-if="!item.show_video">
						<u-icon name="play-circle" color="#fff" size="60"></u-icon>
					</view>
					<image :class="'mv_source_image '+(item.show_video?'hide_none':'')" :src="item.cover" mode="widthFix"></image>
					<video :id="'video'+item.id" v-if="item.show_video" :poster="item.cover" class="mv_source_video" :src="item.video"
						controls loop playsinline :title="item.name+'-'+item.artistName" object-fit="fill"></video>
				</view>
				<view class="mv_title">{{item.name}}-{{item.artistName}}</view>
			</view>

		</view>
		<u-empty mode="history" text="MV么有了" v-if="mvList.length == 0">
		</u-empty>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	var app=getApp();
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				scrollTop: 0,
				limit: 10,
				offset: 0,
				mvList: [],
			}
		},
		onLoad() {
			this.getMvList();
			this.setIsPlay(false);
			app.globalData.innerAudioContext.pause();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.offset += this.limit;
			this.getMvList();
		},
		methods: {
			...mapMutations(['setIsPlay']),
			mvClick(videoItem, index){
				let {id, show_video, video} = videoItem;
				if (uni.$isEmpty(video)) {
					this.getMvUrlInfo(id, index);
					return;
				}
				this.openMvAndCloseOtherMv(index);
			},
			
			/**
			 * 关闭其他MV
			 */
			openMvAndCloseOtherMv(currentIndex){
				let _this = this;
				_this.mvList.forEach((item, index)=>{
					let refName = "video"+item.id;
					if (currentIndex == index) {
						item.show_video = true;
					}
					if (item.show_video) {
						if (uni.$isEmpty(item.video_ref)) {
							let video_ref = uni.createVideoContext(refName, _this)
							item.video_ref = video_ref;
						}
						if (currentIndex == index) {
							item.video_ref.play();
						} else {
							item.video_ref.pause();
							item.show_video = false;
						}
					}
				})
			},
			
			/**
			 * 获取MV链接详情
			 */
			getMvUrlInfo(id, index){
				let _this = this;
				let requestData = {
					url: '/mv/url?id=' +id,
					loading: true,
					type: "get",
				};
				uni.$ajax(requestData).then(res => {
					if (res.data && res.data.url) {
						_this.mvList[index].video = res.data.url;
						_this.openMvAndCloseOtherMv(index);
					}
				})
			},
			
			/**
			 * 获取MV
			 */
			getMvList() {
				let _this = this;
				let requestData = {
					url: '/mv/all?limit=' + _this.limit + '&offset=' + _this.offset,
					loading: true,
					type: "get",
				};
				uni.$ajax(requestData).then(res => {
					let mvListArr = res.data || "";
					let mvList = [];
					if (mvListArr) {
						mvListArr.forEach(item => {
							let {
								id,
								name,
								cover,
								artistName,
								playCount,
								duration
							} = item;
							mvList.push({
								id,
								name,
								cover,
								artistName,
								playCount,
								duration,
								show_video: false,
								video: "",
								video_ref: "",
							});
						})
						if (_this.mvList.length > 0) {
							_this.mvList = [..._this.mvList, ...mvList];
						} else {
							_this.mvList = mvList;
						}
					}
				})
			},
		}
	}
</script>

<style>
	.wap_content {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
		background-color: #f2f2f2;
	}

	.mv_box {
		width: 100%;
	}

	.mv_item {
		width: 95%;
		margin: 20rpx auto;
		background-color: #fff;
		box-shadow: 1rpx 1rpx 10rpx rgba(0, 0, 0, 0.5);
		border-radius: 20rpx;
		overflow: hidden;
	}

	.mv_source {
		width: 100%;
		position: relative;
	}
	.mv_source_poser_box{
		width: 100%;
		height: 100%;
		position: absolute;
		inset: 0;
		margin: auto;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.2);
	}
	.mv_source_image {
		width: 100%;
		height: 420rpx;
	}

	.mv_source_video {
		width: 100%;
		height: 420rpx;
	}

	.mv_title {
		box-sizing: border-box;
		padding: 10rpx 20rpx 20rpx;
		display: flex;
		align-items: center;
		color: #1a1a1a;
		font-size: 32rpx;
	}
</style>